<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<div class="nav-li">
						<el-select
							size="mini"
							class="el-select"
							v-model="select.specialType"
							placeholder="请选择"
							@change="
								val =>
									crud.refresh({
										specialType: val,
										floorId: ''
									})
							"
						>
							<el-option
								v-for="item in options.specialTypeOp"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</div>
					<div class="nav-li">
						<el-select
							size="mini"
							class="el-select"
							v-model="select.floorId"
							placeholder="请选择"
							@change="
								val =>
									crud.refresh({
										floorId: val
									})
							"
							><el-option label="全部" value=""> </el-option>
							<el-option
								v-for="item in options.floorIdOp"
								:key="item.value"
								:label="item.mainName"
								:value="item.floorId"
							>
							</el-option>
						</el-select>
					</div>
					<div class="nav-li">
						<el-button type="text" size="mini" @click="openForm_CRUD"
							>编辑分类</el-button
						>
					</div>
				</div>
			</template>
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>
			<template #table-column-mdStartTime="{scope}">
				<div style="text-align:left">
					<div>
						免单金额：<span style="color:red">{{ scope.row.mdMoney }} </span>
					</div>
					<div>
						总数：<span style="color:red">{{ scope.row.total }}</span>
					</div>
					<div>
						已领数量：<span style="color:red">{{ scope.row.receiveNum }}</span>
					</div>
					<div>
						剩余数量：<span style="color:red">{{ scope.row.surplusNum }}</span>
					</div>
				</div>
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
// 原大额券 后改为活动商品页面
import goodInfo from './components/list/activity-goods-info';
import couponInfo from './components/list/activity-coupon-info';
import searchCounpon from './components/list/searchCoupon';
import openCurd from './components/openForm_CRUD';
export default {
	data() {
		return {
			crud: null,
			enterGoodsInfo: {},
			select: {
				specialType: 0,
				floorId: ''
			},
			options: {
				specialTypeOp: [
					{
						value: 0,
						label: '大额券'
					},
					{
						value: 1,
						label: '天猫国际'
					},
					{
						value: 2,
						label: '品牌优选'
					}
				],
				floorIdOp: []
			}
		};
	},
	watch: {
		'select.specialType'(val) {
			this.fatchClassFy(val);
			this.select.floorId = '';
		}
	},
	components: {
		goodInfo,
		couponInfo,
		// eslint-disable-next-line
		searchCounpon
	},
	created() {
		this.fatchClassFy(0);
	},
	methods: {
		fatchClassFy(specialType) {
			this.$service.goodsMenagement.specialClassify
				.list({
					specialType
				})
				.then(res => {
					this.options.floorIdOp = res;
				});
		},
		setGoodsort(item) {
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '100px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'ysqLevel',
						label: '排序值',
						span: 24,
						value: item.ysqLevel ? item.ysqLevel : 100,
						component: {
							name: 'ysqlevel-input',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											controls-position="right"
											min={1}
											max={100000}
											onInput={this.input}
											v-model={this.value2}></el-input-number>
										<span style="color:red;margin-left:10px">
											* 序号越大，排序越靠前
										</span>
									</div>
								);
							}
						},
						rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
					},
					{
						prop: 'status',
						label: '是否上架',
						span: 12,
						value: item.status,
						component: {
							name: 'el-input-number1',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							},
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							methods: {
								change(e) {
									console.log(e);
									this.$emit('input', e);
								}
							},
							mounted() {
								this.value2 = this.value;
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={0}>下架</el-radio>
									</el-radio-group>
								);
							}
						},
						rules: [{ required: true, message: '免单总数不能为空', trigger: 'blur' }]
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.specialGoods
							.update({
								...data,
								bigCouponGoodsId: item.bigCouponGoodsId,
								id: item.id
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.specialGoods)
				.set('dict', {
					label: {
						add: '添加用户',
						delete: '删除'
					}
				})
				.permission({
					delete: false
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'left',
							'min-width': 400
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'left',
							'min-width': 210
						},
						{
							label: '月销量',
							prop: 'sale',
							align: 'center'
						},
						{
							label: '商品排序',
							prop: 'ysqLevel',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						},
						{
							label: '佣金比例',
							prop: 'commissionRate',
							align: 'center'
						}
					],

					op: {
						visible: true,
						layout: ['slot-setSort', 'delete'],
						props: {
							width: '80px'
						}
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						width: '500px',
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [],
					op: {
						visible: true,
						layout: ['cancel', 'confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { list } = await next(params);
					list.map(item => {
						item.commissionRate = item.commissionRate + '%';
						item.sale = item.sale + '件';
					});
				})
				.done();

			app.refresh({
				prop: 'ysqLevel',
				order: 'desc',
				specialType: 0
			});
		},
		openForm_CRUD() {
			this.$refs['cl-form'].open({
				props: {
					title: '编辑分类',
					width: '800px',
					size: 'mini'
				},
				op: {
					confirmButtonText: '保存',
					cancelButtonText: '关闭',

					layout: ['cancel'] // 同crud下的layout
				},
				items: [
					{
						props: {
							labelWidth: '0px'
						},
						component: openCurd
					}
				]
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}

.el-select {
	width: 100px;
}
</style>
